import { useState, useEffect, } from "react"
function Header(){
  const [count, setCount] = useState(0)
  useEffect(() =>{
    // 这里写函数写正常的副作用函数
    return () => {
      // 返回函数里面写一些清除事件或者定时器等操作，类似与vue2 destory函数
      console.log('组件卸载了，类似与类组件的componentWillUnmount')
    }
  },[]) // // 如果依赖项只写一个空数组，就表示这个副作用，只在组件挂载的时候执行一遍

  return(
    <>
    <h3>状态变量：{count}</h3>
     <button onClick={() => setCount(count+1)}>修改数据count</button>
    </>
  )
}

function App(){
  const [msg, setMsg] = useState(5)
  return(
    <>
   {msg>2? <Header/> :(<div>header组件销毁了</div>)}
   <button onClick = {() => setMsg(msg-1)}>msg值：{msg}</button>
    </>
  )
}
export default App